<div class="c-content-box c-size-md c-bg-img-top c-no-padding c-pos-relative">
    <div class="container">
        <div class="c-content-contact-1 c-opt-1">
            <div class="row" data-auto-height=".c-height">
                <div class="col-sm-8 c-desktop"></div>
                <div class="col-sm-4">
                    <div class="c-body">
                        <div class="c-section">
                            <h3>{field.name}</h3>
                        </div>
                        <div class="c-section">
                            <div class="c-content-label c-font-uppercase c-font-bold c-theme-bg">Address</div>
                            <p><f:format.nl2br>{field.address}</f:format.nl2br></p>
                        </div>
                        <div class="c-section">
                            <div class="c-content-label c-font-uppercase c-font-bold c-theme-bg">Tel</div>
                            <p><f:format.nl2br>{field.telephone}</f:format.nl2br></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="gmapbg" class="c-content-contact-1-gmap" style="max-height: 615px;"></div>
    <div id="gmapaddress" class="hide"><f:format.nl2br>{field.address}</f:format.nl2br></div>
</div>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ydzxcQpT4ofcl02srEs1xf0k"></script>
<script type="text/javascript">
    var map = new BMap.Map("gmapbg"), myGeo = new BMap.Geocoder();
    myGeo.getPoint($('#gmapaddress').text(), function (point) {
        if (point) {
            map.centerAndZoom(point, 13);
            map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT})); // 添加比例尺控件
            map.addControl(new BMap.NavigationControl());  //左上角，添加默认缩放平移控件
            map.disableScrollWheelZoom();
            var marker = new BMap.Marker(point, {icon: new BMap.Icon("fileadmin/templates/v2/public/images/mapicon.png", new BMap.Size(30, 36))});  // 创建标注
            map.addOverlay(marker);
            addClickHandler("<f:format.nl2br>{field.name}</f:format.nl2br>", $('#gmapaddress').html(), marker);
        }
    });
    function addClickHandler(title, content, marker) {
        marker.addEventListener("click", function (e) {
            var p = e.target;
            var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
            var infoWindow = new BMap.InfoWindow(content, {width: 200, height: 100, title: title});  // 创建信息窗口对象
            map.openInfoWindow(infoWindow, point); //开启信息窗口
        });
    }
</script>

<!--
<script src="http://maps.google.cn/maps/api/js?language=zh-CN&key=AIzaSyCAi5QX8WjaEulEn42R0oF0JYGYAnR4FY8" type="text/javascript"></script>
<script src="fileadmin/templates/v2/public/plugins/gmaps/gmaps.js" type="text/javascript"></script>
<script type="text/javascript">
    var PageContact = function () {
        var _init = function () {
            var mapbg = new GMaps({
                div: '#gmapbg',
                lat: '<f:format.raw>{field.lat}</f:format.raw>',
                lng: '<f:format.raw>{field.lng}</f:format.raw>',
                scrollwheel: false,
                zoom: 14
            });
            mapbg.addMarker({
                lat: '<f:format.raw>{field.lat}</f:format.raw>',
                lng: '<f:format.raw>{field.lng}</f:format.raw>',
                title: '<f:format.nl2br>{field.name}</f:format.nl2br>',
                infoWindow: {
                    content: '<h3><f:format.nl2br>{field.name}</f:format.nl2br></h3><p>'+$('#gmapaddress').html()+'</p>'
                }
            });
        };
        return {
            //main function to initiate the module
            init: function () {
                _init();
            }
        };
    }();
    $(document).ready(function () {
        PageContact.init();
    });
</script>-->